import React, { Component } from 'react';
import {
  View,
  Animated,
  StyleSheet,
} from 'react-native';
import PxToDp from '../../../utils/PxToDp';

class CompareBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      widthAnim: new Animated.Value(0),
    };
  }
  componentDidMount() {
    const { value, base } = this.props;
    const width = (142 * value) / base;
    Animated.timing(
      this.state.widthAnim,
      {
        toValue: PxToDp(width),
        duration: 2000,
      },
    ).start();
  }
  render() {
    return (
      <View style={[styles.flex, styles.row]}>
        <View style={[styles.outBar]}>
          <Animated.View
            style={[styles.innerBar,
              {
                ...this.props.style,
                width: this.state.widthAnim,
              }]
            }
          >
            {this.props.children}
          </Animated.View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
  },
  outBar: {
    marginLeft: 0,
    marginTop: 0,
    width: PxToDp(142),
    height: PxToDp(6),
    backgroundColor: 'transparent',
  },
  innerBar: {
    height: '100%',
  },
});

export default CompareBar;
